<template>
  <div class="headlines">
    <div style="background: white;padding: 5px;">
      <div class="options">
        <div style="padding: 5px">经营异常报告</div>
        <div>
          <el-input v-model="pevent" size="mini" style="width: 168px;margin-right: 5px;" />
          <el-button type="primary" size="mini" @click="headlines">搜索</el-button>
        </div>
      </div>
      <jc-table
        serial
        :table-data="tableData"
        :table-header="tableHeader"
        :table-height="tableHeight"
        @clickRow="headlineDetail"
      >
        <template v-slot:billSlot="col">
          <el-link type="primary" class="shijian" @click="headlineDetail(col.scope.row)" v-html="col.scope.row.pevent" />
        </template>
        <template v-slot:btnSlot="col">
          <el-button-group>
            <el-button type="warning" size="mini" @click="headlinesEdit(col.scope.row)">{{ $t('btn.edit') }}</el-button>
            <el-button type="danger" size="mini" @click="waterDel(col.scope.row, 1)">删除</el-button>
          </el-button-group>
        </template>
      </jc-table>
      <div style="margin-top: 5px;">
        <jc-pagination
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          @pagination="headlines"
        />
      </div>
    </div>
    <!--  流水  -->
    <waters />
    <!--   企业利润表 -->
    <div class="revenue">
      <span class="revenue-title">
        企业利润表(单位: 元)
        <el-button style="margin-left: 5px;" size="mini" @click="monthIncome">{{ $t('btn.reload') }}</el-button>
        <span style="margin-left: 10px;color: #666;font-size: 14px;">所选年份: {{ selYear }}</span>
        <el-date-picker
          v-model="years"
          type="year"
          value-format="yyyy"
          size="mini"
          style="margin-left: 10px;width: 150px;"
          @change="monthIncome"
        />
        <el-button class="btnTig" size="mini" @click="yearIncome">{{ $t('btn.reload') }}</el-button>
      </span>
      <div class="revenue-main">
        <div class="revenue-main-lef">
          <jc-table
            :table-data="tableData2"
            :table-header="tableHeader2"
            :table-height="'450px'"
          >
            <template v-slot:billSlot="col">
              <span v-if="bilHead.includes(col.scope.row.pItemtype)" style="font-weight: bold;color: #000;">
                {{ col.scope.row.pItemtype }}
              </span>
              <span v-else>{{ col.scope.row.pItemtype }}</span>
            </template>
          </jc-table>
        </div>
        <div class="revenue-main-rig">
          <jc-table
            :table-data="tableData3"
            :table-header="tableHeader3"
            table-height="255px"
          >
            <template v-slot:billSlot="col">
              <span v-if="bilHead.includes(col.scope.row.pItemtype)" style="font-weight: bold;color: #000;">
                {{ col.scope.row.pItemtype }}
              </span>
              <span v-else>{{ col.scope.row.pItemtype }}</span>
            </template>
          </jc-table>
          <div class="column">
            <column ref="column" :datas="tableData3" :year="headList" />
          </div>
        </div>
      </div>
    </div>
    <div class="liabilities">
      <div class="chart-layout">
        <h4>资产负债表</h4>
        <div class="liabilities-title">
          <span>流动资产</span>
          <span>非流动资产</span>
          <span>流动负债</span>
          <span>非流动负债</span>
        </div>
        <el-descriptions :column="4" border size="mini">
          <el-descriptions-item><template slot="label">货币资金</template>0</el-descriptions-item>
          <el-descriptions-item><template slot="label">债权投资</template>0</el-descriptions-item>
          <el-descriptions-item><template slot="label">短期借款</template>0</el-descriptions-item>
          <el-descriptions-item><template slot="label">长期借款</template>0</el-descriptions-item>

          <el-descriptions-item><template slot="label">金融资产</template>0</el-descriptions-item>
          <el-descriptions-item><template slot="label">长期股权投资</template>0</el-descriptions-item>
          <el-descriptions-item><template slot="label">金融负债</template>0</el-descriptions-item>
          <el-descriptions-item><template slot="label">租赁负债</template>0</el-descriptions-item>

          <el-descriptions-item><template slot="label">应收票据</template>0</el-descriptions-item>
          <el-descriptions-item><template slot="label">其他权益投资</template>0</el-descriptions-item>
          <el-descriptions-item><template slot="label">应付票据</template>0</el-descriptions-item>
          <el-descriptions-item><template slot="label">预计负债</template>0</el-descriptions-item>

          <el-descriptions-item><template slot="label">应收账款</template>0</el-descriptions-item>
          <el-descriptions-item><template slot="label">固定资产</template>0</el-descriptions-item>
          <el-descriptions-item><template slot="label">应付账款</template>0</el-descriptions-item>
          <el-descriptions-item><template slot="label">递延收益</template>0</el-descriptions-item>

          <el-descriptions-item><template slot="label">预付款项</template>0</el-descriptions-item>
          <el-descriptions-item><template slot="label">在建工程</template>0</el-descriptions-item>
          <el-descriptions-item><template slot="label">合同负债</template>0</el-descriptions-item>
          <el-descriptions-item><template slot="label">递延所得税负债</template>0</el-descriptions-item>

          <el-descriptions-item><template slot="label">其他应收款合计</template>0</el-descriptions-item>
          <el-descriptions-item><template slot="label">使用权资产</template>0</el-descriptions-item>
          <el-descriptions-item><template slot="label">应付职工薪酬</template>0</el-descriptions-item>
          <el-descriptions-item />

          <el-descriptions-item><template slot="label">存货</template>0</el-descriptions-item>
          <el-descriptions-item><template slot="label">无形资产</template>0</el-descriptions-item>
          <el-descriptions-item><template slot="label">应交税费</template>0</el-descriptions-item>
          <el-descriptions-item />

          <el-descriptions-item><template slot="label">其他流动资产</template>0</el-descriptions-item>
          <el-descriptions-item><template slot="label">商誉</template>0</el-descriptions-item>
          <el-descriptions-item><template slot="label">其他应付款合计</template>0</el-descriptions-item>
          <el-descriptions-item />

          <el-descriptions-item />
          <el-descriptions-item><template slot="label">长期待摊费用</template>0</el-descriptions-item>
          <el-descriptions-item><template slot="label">一年内到期非流动负债</template>0</el-descriptions-item>
          <el-descriptions-item />

          <el-descriptions-item />
          <el-descriptions-item><template slot="label">递延所得税资产</template>0</el-descriptions-item>
          <el-descriptions-item><template slot="label">其他流动负债</template>0</el-descriptions-item>
          <el-descriptions-item />

          <el-descriptions-item />
          <el-descriptions-item><template slot="label">其他非流动资产</template>0</el-descriptions-item>
          <el-descriptions-item />
          <el-descriptions-item />

          <el-descriptions-item label-style="font-weight: 600;color: #333">
            <template slot="label">流动资产合计：</template>0
          </el-descriptions-item>
          <el-descriptions-item label-style="font-weight: 600;color: #333">
            <template slot="label">非流动资产合计：</template>0
          </el-descriptions-item>
          <el-descriptions-item label-style="font-weight: 600;color: #333">
            <template slot="label">流动负债合计：</template>0
          </el-descriptions-item>
          <el-descriptions-item label-style="font-weight: 600;color: #333">
            <template slot="label">非流动负债合计：：</template>0
          </el-descriptions-item>

          <el-descriptions-item span="2" label-style="font-weight: 600;color: #333">
            <template slot="label">资产总计</template>0
          </el-descriptions-item>
          <el-descriptions-item span="2" label-style="font-weight: 600;color: #333">
            <template slot="label">负债总计</template>0
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="fixed-assets">
        <discount />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ManageHome',
  components: {
    waters: () => import('@/views/homePageNew/manageHome/component/waters'),
    column: () => import('@/views/homePageNew/manageHome/component/column'),
    discount: () => import('@/views/homePageNew/manageHome/component/discount')
  },
  data: () => ({
    total: 0,
    pageNum: 1,
    pageSize: 200,
    ftype: 2052,
    tableHeight: '350px',
    headlinesData: {},
    value: '',
    value1: '',
    input: '',
    tableData: [],
    tableHeader: [
      { label: '异常日期', prop: '', width: '100px' },
      { label: '异常事项', prop: '', type: 'bill' },
      { label: '异常部门', prop: '', width: '200px' },
      { label: '部门负责人', prop: '', width: '200px' },
      { label: '操作', type: 'btn', width: '200px' }
    ],
    years: '',
    headList: [],
    bilHead: ['收入合计', '支出合计', '月度净资产', '年度净资产'],
    tableData2: [],
    tableHeader2: [
      { label: '本年月度收支', type: 'bill', prop: 'pItemtype', minWidth: '100' },
      { label: '1月', prop: '1String', minwidth: '80' },
      { label: '2月', prop: '2String', minwidth: '80' },
      { label: '3月', prop: '3String', minwidth: '80' },
      { label: '4月', prop: '4String', minwidth: '80' },
      { label: '5月', prop: '5String', minwidth: '80' },
      { label: '6月', prop: '6String', minwidth: '80' },
      { label: '7月', prop: '7String', minwidth: '80' },
      { label: '8月', prop: '8String', minwidth: '80' },
      { label: '9月', prop: '9String', minwidth: '80' },
      { label: '10月', prop: '10String', minwidth: '80' },
      { label: '11月', prop: '11String', minwidth: '80' },
      { label: '12月', prop: '12String', minwidth: '80' },
      { label: '合计', prop: 'allmount', minWidth: '80' }
    ],
    tableData3: [],
    tableHeader3: [
      { label: '年度净资产', type: 'bill', prop: 'pItemtype', minWidth: '100' },
      { label: '2020年', prop: '1String', minWidth: '70' },
      { label: '2021年', prop: '2String', minWidth: '70' },
      { label: '2022年', prop: '3String', minWidth: '70' },
      { label: '2023年', prop: '4String', minWidth: '70' },
      { label: '2024年', prop: '5String', minWidth: '70' },
      { label: '2025年', prop: '6String', minWidth: '70' },
      { label: '2026年', prop: '7String', minWidth: '70' },
      { label: '2027年', prop: '8String', minWidth: '70' },
      { label: '合计', prop: 'allmount', minWidth: '80' }
    ],
    selYear: '',
    assetsDa: {
      totalnetassets: 0
    }, // 资产负债表
    pevent: '',
    editor: ''
  }),
  created() {
    // this.headlines() // 头条列表
    // this.yearIncome() // 本年月度
    // this.monthIncome() // 年度净资产
    // this.yearAssets() // 资产负债表
  },
  methods: {
    // 头条列表
    headlines() {
      const DATA = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        serch: this.pevent
      }
      // queryheadlinesList(DATA).then(res => {
      //   if (res.code === 0) {
      //     this.tableData = res.data.array
      //     this.total = res.data.total
      //   }
      // })
    },
    // 年月度收支
    monthIncome() {
      const year = this.years || new Date().getFullYear()
      this.selYear = year
      // queryReportForms({ year }).then(res => {
      //   if (res.code === 0) {
      //     this.tableData2 = res.data
      //   } else {
      //     this.$confirm(res.message, '提示', {
      //       confirmButtonText: '确定',
      //       type: 'warning'
      //     })
      //   }
      // })
    },
    // 年度净资产
    yearIncome() {
      // queryReportFormsYear({}).then(res => {
      //   if (res.code === 0) {
      //     this.tableData3 = res.data.data
      //     this.headList = Object.values(res.data.year).map(res => {
      //       return res + '年'
      //     })
      //     this.headList.push('合计')
      //     this.headList.unshift('年度净资产')
      //     this.tableHeader3.map((res, inde) => {
      //       this.headList.forEach((item, index) => {
      //         if (inde === index) {
      //           res.label = item
      //         }
      //       })
      //     })
      //     this.$refs.column.queryContrast()
      //   } else {
      //     this.$confirm(res.message, '提示', {
      //       confirmButtonText: '确定',
      //       type: 'warning'
      //     })
      //   }
      // })
    },
    // 资产负债表
    yearAssets() {
      // queryYearAssets({}).then(res => {
      //   if (res.code === 0) {
      //     this.assetsDa = res.data
      //   } else {
      //     this.$confirm(res.message, '提示', {
      //       confirmButtonText: '确定',
      //       type: 'warning'
      //     })
      //   }
      // })
    }
  }
}
</script>
<style lang="scss" scoped>
.pagination-container {
  padding: 0 !important;
}
//.headlines {
//  padding: 5px;
//  background: #fff;
//}
.options {
  padding-bottom: 5px;
  display: flex;
  justify-content: space-between;
}
.shijian {
  max-height: 35px;
  &::v-deep p {
    margin: 0;
    padding: 0;
  }
  &::v-deep img {
    max-width: 50px;
    max-height: 30px;
  }
}
.revenue {
  padding: 0 5px 15px;
  margin-top: 10px;
  display: flex;
  background-color: white;
  flex-direction: column;
  &-title {
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    position: relative;
    .btnTig {
      position: absolute;
      right: 0;
    }
  }
  &-main {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-flow: nowrap;
    .revenue-main-lef {
      width: 54%;
    }
    .revenue-main-rig {
      width: 45.5%;
      .column {
        width: 100%;
        height: 200px;
      }
    }
    .expenditure {
      display: grid;
      grid-template-columns: repeat(2, 70%, 30%);
    }
  }
}
.el-descriptions::v-deep :not(.is-bordered) .el-descriptions-item__cell {
  width: 100px;
}
.liabilities {
  margin-top: 10px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  background-color: white;
  padding: 0 5px 10px;
  .chart-layout {
    width: 50%;
    h4 {
      margin: 10px 0;
    }
  }
  &-title {
    display: flex;
    background-color: #fafafa;
    height: 30px;
    align-items: center;
    justify-content: space-around;
    border: 1px solid #ccc;
    border-bottom: none;
  }
  .fixed-assets {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

  }
}
.headetail {
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    padding: 5px 0;
    span:nth-child(1) {
      font-size: 16px;
      font-weight: 600;
      margin-right: 10px;
    }
    h2 {
      text-align: center;
      margin: 0 0 10px;
      padding: 0;
    }
  }
}
</style>
